<template>
	<div class="container" style="padding-top: 0;">
		<router-link class="not-login" tag="div" to="/login">
			<div>
				<img class="mobile" src="~@/assets/phone.png">
			</div>
			<!-- <div class="text">登录 / 注册</div> -->
		</router-link>
		<van-cell title="修改密码" is-link to="/edit_password" />
		<van-cell title="联系我们" is-link to="/contact" />
		<van-cell class="mb-4" title="关于我们" is-link to="/" />
		<!--  退出登录这个按钮  登录了才显示 不登录的就该看不见  -->
		<van-cell v-if="TOKEN" class="logout-cell" title="退出登录" @click="logout" /> <!-- @click="logout" -->
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: "my",
		data() {
			return {}
		},
		computed: {
			...mapState(['userInfo', 'TOKEN', 'publish_num', 'liked_num']),
		},
		created() {

			// let userInfo = localStorage.getItem('userInfo');

			// if(userInfo){
			// 	userInfo = JSON.parse(userInfo)
			// }

			// console.log(userInfo);
			// this.userInfo = userInfo || {};

		},
		methods: {
			...mapMutations(['LOGOUT']),
			logout() {
				this.$dialog.confirm({
						title: '提示',
						message: '您确定要退出登录吗?',
					})
					.then(() => {
						this.LOGOUT()
					})
			}

		}


	}
</script>

<style scoped="scoped">
	/deep/.icon-shoucang-copy:before {
		font-size: 170%;
		color: #f30823;
	}

	/deep/.icon-lishi-copy:before {
		color: #f30823;
		font-size: 170%;
	}
</style>
<style lang="scss">
	.container {
		.not-login {
			height: 360px;
			background: url(../assets/tu.webp) repeat;
			background-size: cover;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.mobile {
				width: 120px;
				height: 120px;
			}

			.text {
				font-size: 14px;
				color: #fff;
			}
		}

		.nav-grid {
			.nav-grid-item {
				height: 150px;

				.iconfont {
					font-size: 22px;
					margin-bottom: 5px;
				}

				.icon-shoucang {
					color: #eb5253;
				}

				.icon-lishi {
					color: #ff9d1d;
				}

				.van-grid-item__text {
					font-size: 14px;
					color: #333333;
				}
			}
		}

		.logout-cell {
			text-align: center;
			color: black;
			background: url(../assets/tu.webp) repeat;
		}

		.mb-4 {
			margin-bottom: 4px;
		}
	}
</style>
